import { useState } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { Heart, Clock, Activity, ChevronRight, ArrowLeft, BarChart2, Award, Book } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

// 定义有氧运动类型
interface AerobicExercise {
  id: string;
  title: string;
  description: string;
  image: string;
  benefits: string[];
  heartRateRange: {
    beginner: string;
    intermediate: string;
    advanced: string;
  };
  timeRange: {
    beginner: string;
    intermediate: string;
    advanced: string;
  };
  tips: string[];
  stretches: {
    name: string;
    steps: string[];
    image: string;
  }[];
}

// 有氧运动数据
const aerobicExerciseData: AerobicExercise[] = [
  {
    id: 'running',
    title: '跑步',
    description: '跑步是最常见、最便捷的有氧运动之一，适合各个年龄段的人群。它不仅能提高心肺功能，还能有效燃烧脂肪，增强下肢力量。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=people%20jogging%20in%20park%20outdoors&sign=d705be8a4f87432f46eb0b92362e67b7',
    benefits: [
      '提高心肺功能和耐力',
      '有效燃烧卡路里，帮助减肥',
      '增强下肢肌肉力量',
      '改善睡眠质量',
      '降低压力和焦虑'
    ],
    heartRateRange: {
      beginner: '60%-70% 最大心率',
      intermediate: '70%-80% 最大心率',
      advanced: '80%-90% 最大心率'
    },
    timeRange: {
      beginner: '20-30分钟/次',
      intermediate: '30-45分钟/次',
      advanced: '45-60分钟/次'
    },
    tips: [
      '选择合适的跑鞋，减少对膝盖的冲击',
      '保持正确的跑步姿势，身体微微前倾',
      '跑步前进行5-10分钟的热身运动',
      '呼吸要有节奏，通常是两步一吸两步一呼',
      '逐渐增加跑步的距离和强度'
    ],
    stretches: [
      {
        name: '小腿拉伸',
        steps: [
          '面对墙壁，双手扶墙',
          '一只脚在前，膝盖微屈',
          '另一只脚在后，伸直膝盖，脚跟贴地',
          '身体向前倾斜，感受后腿小腿的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=calf%20stretch%20exercise%20after%20running&sign=a8c948acf3f22085d263191fd94b695f'
      },
      {
        name: '股四头肌拉伸',
        steps: [
          '站立，重心放在一条腿上',
          '另一条腿向后弯曲，用手抓住脚踝',
          '缓慢将脚跟拉向臀部',
          '保持身体直立，感受大腿前侧的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=quadriceps%20stretch%20exercise%20after%20workout&sign=49d8d0311dd4b5b1766d35fa21626345'
      }
    ]
  },
  {
    id: 'jumping-rope',
    title: '跳绳',
    description: '跳绳是一种高效的有氧运动，器材简单，不受场地限制。它能在短时间内燃烧大量卡路里，同时提高协调性和爆发力。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=person%20jumping%20rope%20in%20gym%20workout&sign=8424c6340023f4fd6c0a76c824534373',
    benefits: [
      '每分钟燃烧10-16卡路里，高效燃脂',
      '提高心肺功能和耐力',
      '增强下肢力量和爆发力',
      '改善手眼协调能力',
      '锻炼核心稳定性'
    ],
    heartRateRange: {
      beginner: '65%-75% 最大心率',
      intermediate: '75%-85% 最大心率',
      advanced: '85%-95% 最大心率'
    },
    timeRange: {
      beginner: '10-15分钟/次（可间歇）',
      intermediate: '15-25分钟/次（可间歇）',
      advanced: '25-30分钟/次（可间歇）'
    },
    tips: [
      '选择适合身高的跳绳，手柄高度在腰部附近',
      '跳绳时前脚掌着地，减轻对膝盖的冲击',
      '保持膝盖微屈，身体微微前倾',
      '手臂贴近身体两侧，用手腕力量转动跳绳',
      '初学者可以从短时间、低强度开始，逐渐增加'
    ],
    stretches: [
      {
        name: '手腕拉伸',
        steps: [
          '伸直手臂，掌心向前',
          '用另一只手轻轻向后拉手指',
          '感受手腕和前臂的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=wrist%20stretch%20exercise%20after%20workout&sign=2b964763f3044daf3ea27ad6bb590269'
      },
      {
        name: '小腿拉伸',
        steps: [
          '面对墙壁，双手扶墙',
          '一只脚在前，膝盖微屈',
          '另一只脚在后，伸直膝盖，脚跟贴地',
          '身体向前倾斜，感受后腿小腿的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=calf%20stretch%20exercise%20after%20workout&sign=d54cf28f3bd0a8e6bf669fc8503912a9'
      }
    ]
  },
  {
    id: 'stairs',
    title: '爬楼',
    description: '爬楼梯是一种简单易行的有氧运动，几乎随时随地都可以进行。它主要锻炼下肢肌肉群，同时能有效提高心肺功能。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=people%20climbing%20stairs%20for%20exercise&sign=ae62b2fd005b1a93c8c5b189609e3d68',
    benefits: [
      '增强下肢肌肉力量，特别是大腿和臀部',
      '提高心肺功能和耐力',
      '燃烧卡路里，帮助减肥',
      '改善关节灵活性',
      '锻炼平衡能力'
    ],
    heartRateRange: {
      beginner: '60%-70% 最大心率',
      intermediate: '70%-80% 最大心率',
      advanced: '80%-90% 最大心率'
    },
    timeRange: {
      beginner: '10-15分钟/次',
      intermediate: '15-25分钟/次',
      advanced: '25-35分钟/次'
    },
    tips: [
      '保持背部挺直，脚步稳健',
      '一步一个台阶，避免跳跃',
      '抓住扶手保持平衡，但不要过度依赖',
      '下楼时要缓慢，减少对膝盖的冲击',
      '可以尝试间歇性训练，爬楼与休息交替'
    ],
    stretches: [
      {
        name: '大腿后侧拉伸',
        steps: [
          '坐在楼梯上，一条腿伸直，另一条腿弯曲',
          '身体向前倾斜，双手伸向伸直的脚尖',
          '感受大腿后侧的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=hamstring%20stretch%20exercise%20sitting&sign=88f62006bf5d5b10b8e58b5fab838f74'
      },
      {
        name: '臀部拉伸',
        steps: [
          '坐姿，一条腿伸直，另一条腿跨过伸直的腿',
          '用对侧的手臂抱住弯曲的膝盖',
          '向对侧缓慢转动身体',
          '感受臀部的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=glute%20stretch%20exercise%20sitting&sign=8c2768e0a5275329385e88c760104e1c'
      }
    ]
  },
  {
    id: 'swimming',
    title: '游泳',
    description: '游泳是一种低冲击的有氧运动，对关节友好，适合各个年龄段的人群。它能全面锻炼全身肌肉，同时提高心肺功能。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=people%20swimming%20in%20pool%20workout&sign=00125c7d4edfe11ba09825a5b98bef45',
    benefits: [
      '全身肌肉均衡锻炼，特别是背部、肩部和手臂',
      '低冲击运动，对关节压力小',
      '提高心肺功能和耐力',
      '改善柔韧性和协调性',
      '帮助放松身心，缓解压力'
    ],
    heartRateRange: {
      beginner: '55%-65% 最大心率',
      intermediate: '65%-75% 最大心率',
      advanced: '75%-85% 最大心率'
    },
    timeRange: {
      beginner: '20-30分钟/次',
      intermediate: '30-45分钟/次',
      advanced: '45-60分钟/次'
    },
    tips: [
      '选择适合自己的泳姿，初学者可以从自由泳或蛙泳开始',
      '保持正确的呼吸节奏，避免换气过快',
      '游泳前进行充分的热身运动',
      '注意保持身体平衡，减少水的阻力',
      '逐渐增加游泳的距离和强度'
    ],
    stretches: [
      {
        name: '肩部拉伸',
        steps: [
          '一只手臂横过胸前',
          '用另一只手轻轻拉住手臂肘部',
          '向对侧拉动，感受肩部的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=shoulder%20stretch%20exercise%20after%20swimming&sign=d32e1dfbdcaaf4ad779a36273087e047'
      },
      {
        name: '背部拉伸',
        steps: [
          '站立，双脚与肩同宽',
          '双手交叉，掌心向外',
          '缓慢向上伸展手臂，同时身体微微后仰',
          '感受背部的拉伸',
          '保持30秒'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=back%20stretch%20exercise%20after%20workout&sign=0d38d31e3dd56a76acf67471658b5e24'
      }
    ]
  },
  {
    id: 'cycling',
    title: '骑车',
    description: '骑车是一种受欢迎的有氧运动，既能锻炼身体，又能欣赏沿途风景。它主要锻炼下肢肌肉，同时能有效提高心肺功能。',
    image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=people%20cycling%20on%20road%20outdoors&sign=c43297fb744e10dc86d0a98d8db96eee',
    benefits: [
      '增强下肢肌肉力量，特别是大腿和臀部',
      '提高心肺功能和耐力',
      '燃烧卡路里，帮助减肥',
      '改善关节灵活性',
      '减少压力，放松心情'
    ],
    heartRateRange: {
      beginner: '60%-70% 最大心率',
      intermediate: '70%-80% 最大心率',
      advanced: '80%-90% 最大心率'
    },
    timeRange: {
      beginner: '30-45分钟/次',
      intermediate: '45-60分钟/次',
      advanced: '60-90分钟/次'
    },
    tips: [
      '调整自行车座椅高度，适合自己的腿长',
      '保持正确的骑行姿势，背部挺直',
      '骑行前进行充分的热身运动',
      '注意控制骑行速度和强度，避免过度疲劳',
      '长途骑行时注意补充水分和能量'
    ],
    stretches: [
      {
        name: '大腿前侧拉伸',
        steps: [
          '站立，重心放在一条腿上',
          '另一条腿向后弯曲，用手抓住脚踝',
          '缓慢将脚跟拉向臀部',
          '保持身体直立，感受大腿前侧的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=quadriceps%20stretch%20exercise%20after%20cycling&sign=e90112debff8555fd33dc68a72660e26'
      },
      {
        name: '腰部扭转拉伸',
        steps: [
          '坐姿，双脚平放在地面',
          '一只手放在对侧膝盖上，另一只手放在身后支撑',
          '缓慢向支撑手的方向扭转身体',
          '感受腰部的拉伸',
          '保持30秒，换另一侧'
        ],
        image: 'https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=spinal%20twist%20stretch%20exercise%20sitting&sign=b1915965d4116b267b7158407dc14d24'
      }
    ]
  }
];

// 最大心率计算函数
const calculateMaxHeartRate = (age: number): number => {
  return 220 - age;
};

export default function AerobicExerciseGuide() {
  const { theme } = useTheme();
  const [activeExercise, setActiveExercise] = useState<string>(aerobicExerciseData[0].id);
  const [expandedTab, setExpandedTab] = useState<'benefits' | 'tips' | 'stretches'>('benefits');
  const [age, setAge] = useState<number>(30);
  const navigate = useNavigate();

  const currentExercise = aerobicExerciseData.find(exercise => exercise.id === activeExercise);
  const maxHeartRate = calculateMaxHeartRate(age);

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent">
            有氧运动指南
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 介绍区域 */}
        <section className="py-8 bg-gradient-to-br from-blue-50 via-white to-orange-50 dark:from-blue-900/30 dark:via-slate-900 dark:to-orange-900/30">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-2xl md:text-3xl font-bold mb-4">科学有氧运动，提升健康水平</h2>
              <p className="text-slate-600 dark:text-slate-300 mb-6">
                有氧运动是改善心肺功能、燃烧脂肪、增强体能的有效方式。本指南涵盖五种常见的有氧运动，
                帮助你选择适合自己的运动方式，科学锻炼，健康生活。
              </p>
              
              {/* 心率计算器 */}
              <div className="bg-white dark:bg-slate-800 rounded-xl p-4 shadow-md inline-block">
                <label htmlFor="age" className="text-sm text-slate-600 dark:text-slate-300 mr-2">你的年龄:</label>
                <input
                  id="age"
                  type="number"
                  value={age}
                  onChange={(e) => setAge(Math.max(1, Math.min(120, parseInt(e.target.value) || 0)))}
                  min="1"
                  max="120"
                  className="w-20 px-3 py-1 rounded-full text-center border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white"
                />
                <span className="ml-4 text-sm font-medium">最大心率: {maxHeartRate} 次/分钟</span>
              </div>
            </div>
          </div>
        </section>

        {/* 内容区域 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            {/* 运动选择器 */}
            <div className="flex overflow-x-auto pb-4 mb-8 gap-2 md:flex-wrap md:justify-center">
              {aerobicExerciseData.map((exercise) => (
                <button
                  key={exercise.id}
                  onClick={() => setActiveExercise(exercise.id)}
                  className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 ${
                    activeExercise === exercise.id
                      ? 'bg-blue-600 text-white shadow-lg shadow-blue-500/20'
                      : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                  }`}
                >
                  {exercise.title}
                </button>
              ))}
            </div>

            {/* 当前运动内容 */}
            {currentExercise && (
              <div className="max-w-5xl mx-auto bg-white dark:bg-slate-800 rounded-2xl shadow-xl overflow-hidden">
                {/* 运动头部 */}
                <div className="relative">
                  <img 
                    src={currentExercise.image} 
                    alt={currentExercise.title}
                    className="w-full h-64 md:h-80 object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  <div className="absolute bottom-0 left-0 right-0 p-6">
                    <h3 className="text-2xl md:text-3xl font-bold text-white mb-2">{currentExercise.title}</h3>
                  </div>
                </div>

                {/* 运动描述 */}
                <div className="p-6">
                  <p className="text-slate-600 dark:text-slate-300 mb-8">
                    {currentExercise.description}
                  </p>

                  {/* 运动指标 */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                    <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                      <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-800 flex items-center justify-center mb-2">
                        <Heart size={18} className="text-blue-600 dark:text-blue-400" />
                      </div>
                      <h4 className="font-semibold text-center mb-1">心率范围</h4>
                      <div className="text-sm text-center">
                        <p className="text-slate-600 dark:text-slate-300">初学者: {currentExercise.heartRateRange.beginner}</p>
                        <p className="text-slate-600 dark:text-slate-300">中级: {currentExercise.heartRateRange.intermediate}</p>
                        <p className="text-slate-600 dark:text-slate-300">高级: {currentExercise.heartRateRange.advanced}</p>
                      </div>
                    </div>
                    
                    <div className="bg-orange-50 dark:bg-orange-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                      <div className="w-10 h-10 rounded-full bg-orange-100 dark:bg-orange-800 flex items-center justify-center mb-2">
                        <Clock size={18} className="text-orange-600 dark:text-orange-400" />
                      </div>
                      <h4 className="font-semibold text-center mb-1">时间建议</h4>
                      <div className="text-sm text-center">
                        <p className="text-slate-600 dark:text-slate-300">初学者: {currentExercise.timeRange.beginner}</p>
                        <p className="text-slate-600 dark:text-slate-300">中级: {currentExercise.timeRange.intermediate}</p>
                        <p className="text-slate-600 dark:text-slate-300">高级: {currentExercise.timeRange.advanced}</p>
                      </div>
                    </div>
                    
                    <div className="bg-green-50 dark:bg-green-900/20 rounded-xl p-4 flex flex-col items-center justify-center">
                      <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-800 flex items-center justify-center mb-2">
                        <Activity size={18} className="text-green-600 dark:text-green-400" />
                      </div>
                      <h4 className="font-semibold text-center mb-1">运动强度</h4>
                      <div className="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2 mb-2">
                        <div className="bg-gradient-to-r from-blue-500 to-orange-500 h-2 rounded-full" style={{ width: '70%' }}></div>
                      </div>
                      <p className="text-sm text-slate-600 dark:text-slate-300">中等至高强度</p>
                    </div>
                  </div>

                  {/* 标签页导航 */}
                  <div className="flex border-b border-slate-200 dark:border-slate-700 mb-6">
                    <button
                      onClick={() => setExpandedTab('benefits')}
                      className={`px-4 py-2 font-medium transition-colors ${
                        expandedTab === 'benefits'
                          ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                          : 'text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400'
                      }`}
                    >
                      运动益处
                    </button>
                    <button
                      onClick={() => setExpandedTab('tips')}
                      className={`px-4 py-2 font-medium transition-colors ${
                        expandedTab === 'tips'
                          ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                          : 'text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400'
                      }`}
                    >
                      运动技巧
                    </button>
                    <button
                      onClick={() => setExpandedTab('stretches')}
                      className={`px-4 py-2 font-medium transition-colors ${
                        expandedTab === 'stretches'
                          ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                          : 'text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400'
                      }`}
                    >
                      拉伸放松
                    </button>
                  </div>

                  {/* 标签页内容 */}
                  {expandedTab === 'benefits' && (
                    <div className="space-y-4">
                      <h4 className="flex items-center font-semibold mb-3">
                        <BarChart2 size={18} className="mr-2 text-blue-600 dark:text-blue-400" />
                        {currentExercise.title}的健康益处
                      </h4>
                      <ul className="list-disc list-inside space-y-3 text-slate-600 dark:text-slate-300 pl-4">
                        {currentExercise.benefits.map((benefit, index) => (
                          <li key={index}>{benefit}</li>
                        ))}
                      </ul>
                    </div>
                  )}

                  {expandedTab === 'tips' && (
                    <div className="space-y-4">
                      <h4 className="flex items-center font-semibold mb-3">
                        <Award size={18} className="mr-2 text-blue-600 dark:text-blue-400" />
                        {currentExercise.title}的技巧与注意事项
                      </h4>
                      <ul className="list-disc list-inside space-y-3 text-slate-600 dark:text-slate-300 pl-4">
                        {currentExercise.tips.map((tip, index) => (
                          <li key={index}>{tip}</li>
                        ))}
                      </ul>
                    </div>
                  )}

                  {expandedTab === 'stretches' && (
                    <div className="space-y-6">
                      <h4 className="flex items-center font-semibold mb-4">
                        <Book size={18} className="mr-2 text-blue-600 dark:text-blue-400" />
                        {currentExercise.title}后的拉伸放松动作
                      </h4>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {currentExercise.stretches.map((stretch, index) => (
                          <div key={index} className="bg-slate-50 dark:bg-slate-700/50 rounded-xl overflow-hidden">
                            <div className="h-48 overflow-hidden">
                              <img 
                                src={stretch.image} 
                                alt={stretch.name}
                                className="w-full h-full object-cover"
                              />
                            </div>
                            <div className="p-4">
                              <h5 className="font-medium mb-2">{stretch.name}</h5>
                              <ol className="list-decimal list-inside space-y-1 text-sm text-slate-600 dark:text-slate-300">
                                {stretch.steps.map((step, stepIndex) => (
                                  <li key={stepIndex}>{step}</li>
                                ))}
                              </ol>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </section>

        {/* 运动建议 */}
        <section className="py-12 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto">
              <h3 className="text-2xl font-bold mb-6 text-center">有氧运动建议</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <BarChart2 size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">训练频率</h4>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    建议每周进行3-5次有氧运动，每次20-60分钟，根据个人体能和目标调整。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Clock size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">循序渐进</h4>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    开始时从低强度、短时间开始，逐渐增加运动强度和持续时间，避免过度疲劳和受伤。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Heart size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">心率监控</h4>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    运动时监控心率，保持在目标心率范围内，确保运动效果和安全性。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-700 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Award size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h4 className="font-semibold mb-2">多样化运动</h4>
                  <p className="text-slate-600 dark:text-slate-300 text-sm">
                    结合多种有氧运动方式，避免单一运动造成的肌肉疲劳和关节压力，同时提高运动趣味性。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 有氧运动指南 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}